<!DOCTYPE html>
<html lang="en" class="html-home">
<head>
    <meta charset="UTF-8">
    <title>内网登录页</title>
    <link rel="stylesheet" href="src/css/reset.css">
    <link rel="stylesheet" href="src/css/home.css">
</head>
<body>
    <div class="page-login-Intranet">
        <div class="content">
            <div class="logo">
                <img src="src/images/logo.png" alt="">
            </div>
            <div class="title">
                天津市港口统一收费服务管理平台
            </div>
            <div class="form">
                <form action="" method="post">
                    <div class="form-item form-item-input">
                        <div class="fomr-item-icon">
                            <img src="src/images/user.png" alt="">
                        </div>
                        <span class="line"></span>
                        <div class="input-box">
                            <input type="text" name="name" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-item form-item-input">
                        <div class="fomr-item-icon">
                            <img src="src/images/passwrod.png" alt="">
                        </div>
                        <span class="line"></span>
                        <div class="input-box">
                            <input type="password" name="passwrod" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-operation clearfix">
                        <div class="fl">
                            <input type="checkbox" name="vehicle" value="Car" class="rem-pas"/>
                            <a href="###" class="rempas-txt">记住密码</a>
                        </div>
                        <div class="fr">
                            <a href="###">忘记密码？</a>
                        </div>
                    </div>
                    <div class="form-item form-button">登录</div>
                </form>
            </div>
        </div>
    </div>
    
    <script src="src/js/jquery-1.10.1.min.js"></script>
    <script>
    $(function(){
        // 兼容IE9下的placeholder
        function placeholderSupport() {
            return 'placeholder' in document.createElement('input');
        }
        if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
            $("[placeholder]").each(function(){
                var _this = $(this);
                var left = _this.css("padding-left");
                _this.parent().append('<span class="placeholder" data-type="placeholder" style="left: ' + left + '">' + _this.attr("placeholder") + '</span>');
                if(_this.val() != ""){
                    _this.parent().find("span.placeholder").hide();
                }
                else{
                    _this.parent().find("span.placeholder").show();
                }
            }).on("focus", function(){
                $(this).parent().find("span.placeholder").hide();
            }).on("blur", function(){
                var _this = $(this);
                if(_this.val() != ""){
                    _this.parent().find("span.placeholder").hide();
                }
                else{
                    _this.parent().find("span.placeholder").show();
                }
            });
            // 点击表示placeholder的标签相当于触发input
            $("span.placeholder").on("click", function(){
                $(this).hide();
                $(this).siblings("[placeholder]").trigger("click");
                $(this).siblings("[placeholder]").trigger("focus");
            });
        }
    })
    </script>
</body>
</html>